<template>
  <div style="width: 100%; height: 100%;">
    <a-space :size="1000" block direction="horizontal">
      <a-radio-group v-model:value="mode" :style="{ marginBottom: '8px' }">
        <a-radio-button value="top">Horizontal</a-radio-button>
        <a-radio-button value="left">Vertical</a-radio-button>
      </a-radio-group>
<!--      <a-radio-group type="solid" size="large" button-style="solid">-->
<!--        <a-radio-button @click="toOpenCreateTab">新建Tab</a-radio-button>-->
<!--      </a-radio-group>-->

    </a-space>
    <a-tabs
        v-model:activeKey="activeKey"
        :tab-position="mode"
        :style="{ height: '200px' }"
        type="editable-card"
        @change="changeTab"
        @edit="editTab"
    >
      <a-tab-pane v-for="tab in tabList" :key="tab.id" :tab="tab.title" >
        <template #closeIcon>
          <CloseOutlined  @click="deleteTab(tab)"/>
        </template>
        <a-divider>此Tab的描述</a-divider>
        <a-typography-text code>{{tab.tabProfile}}</a-typography-text>
        <a-divider>关于此Tab的记录</a-divider>
        <a-list
            :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }"
            :data-source="tabRecordList"
            :pagination="pagination">
          <template #renderItem="{ item }">
            <a-list-item>
              <a-card :title="item.title">
                <a-space direction="vertical">
                  <a-typography-text :delete="item.isFinish">{{item.tabProfile}}</a-typography-text>
                  <div>
                    <a-space :size="60" direction="horizontal">
                      <a-checkbox v-model:checked="item.isFinish" :disabled="false" @change="changeStatus(item)">
                        完成
                      </a-checkbox>
                      <a-typography-text keyboard>{{item.createTime}}</a-typography-text>
                      <a-popconfirm
                        title="Are you sure delete this task?"
                        ok-text="Yes"
                        cancel-text="No"
                        @confirm="confirm(item)"
                        @cancel="cancel"
                    >
                      <a-button danger>DELETE</a-button>
                    </a-popconfirm>

                    </a-space>
                  </div>
                </a-space>
              </a-card>
            </a-list-item>
          </template>
        </a-list>
      </a-tab-pane>
    </a-tabs>
  </div>
  <a-modal v-model:open="openCreateTab" title="新建Tab" @ok="handleOk" :confirm-loading="confirmLoading">
    <a-form :model="createTab" :label-col="labelCol" :wrapper-col="wrapperCol" >
      <a-form-item label="标题">
        <a-input v-model:value="createTab.title" />
      </a-form-item>
      <a-form-item label="Tab说明">
        <a-textarea v-model:value="createTab.tabProfile" />
      </a-form-item>
    </a-form>
  </a-modal>
  <a-modal v-model:open="openCreateRecord" title="新建Tab记录" @ok="handleRecordOk" :confirm-loading="confirmLoadingRecord">
    <a-form v-model="createRecord" :label-col="labelCol" :wrapper-col="wrapperCol" >
      <a-form-item label="标题">
        <a-input v-model:value="createRecord.title" />
      </a-form-item>
      <a-form-item label="Tab说明">
        <a-textarea v-model:value="createRecord.profile" />
      </a-form-item>
    </a-form>
  </a-modal>
  <a-float-button
      tooltip="新建记录"
      type="primary"
      :style="{
      left: '15vw',
      bottom:'10vh'
    }"
      @click="toOpenCreateRecord"
  >
    <template #icon>
      <plus-outlined/>
    </template>
  </a-float-button>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue';
import {PlusOutlined,CloseOutlined} from "@ant-design/icons-vue";
import myAxios from "../axios.js";
import {message} from "ant-design-vue";
const mode = ref('top');
const activeKey = ref();
const openCreateRecord = ref(false);
const deleteTab = (tab) => {
  myAxios.delete('/tab/delete?id='+tab.id).then(
      res => {
        if(res.code === 0 && res.data){
          let index = tabList.value.indexOf(tab);
          tabList.value.splice(index,1);
          if(tab.id == activeKey.value){
              activeKey.value = tabList.value[0].id;
          }
          message.success('删除成功')
        }else{
          message.error("删除失败");
        }
      }
  )
}
const editTab = (e) => {
  console.log(e);
  console.log(typeof e === 'string');
  if(typeof e === 'string'){
      console.log('删除')
  }else{
    toOpenCreateTab();
  }
}
const createRecord = ref({
  title:'',
  profile:'很懒,什么也不说',
  tabId: activeKey.value
})
const confirmLoadingRecord =ref(false);
const toOpenCreateRecord = ()=>{
  openCreateRecord.value = true;
  createRecord.value.tabId = activeKey.value;
}
const handleRecordOk = () => {
  let status = false;
  myAxios.post('/tabTask/create',createRecord.value).then(
      res => {
        if(res.code === 0){
          status = true;
        }
      }
  ).catch(error => {
    console.log("新建Tab记录出现错误",error);
  })
  confirmLoadingRecord.value = true;
  setTimeout(()=>{
    getTabRecord(activeKey.value);
    openCreateRecord.value = false;
    confirmLoadingRecord.value = false;
    createRecord.value.title ='';
    createRecord.value.profile = '很懒,什么也不说';
    if (status){
      message.success('添加成功')
    }
  },2000)
};
const createTab = ref({
  title : '',
  tabProfile:''
})
const confirmLoading = ref(false) ;
const handleOk = () => {
  let status = false;
  myAxios.post('/tab/create',createTab.value).then(
      res => {
        if(res.code === 0){
          status = true;
        }
      }
  ).catch(error => {
    console.log("新建Tab出现错误",error);
  })
  confirmLoading.value = true;
  setTimeout(()=>{
    getTabList();
    openCreateTab.value = false;
    confirmLoading.value = false;
    createTab.value.title ='';
    createTab.value.tabProfile = '';
    if (status){
      message.success('添加成功')
    }
  },2000)
};
const pagination = {
  onChange: (number) => {
    console.log(page);
  },
  pageSize: 6,
};
const openCreateTab = ref(false);
const toOpenCreateTab = () => {
  openCreateTab.value = true;
}
const labelCol = {
  style: {
    width: '150px',
  },
};
const wrapperCol = {
  span: 14,
};
const confirm = (item) => {
  myAxios.delete('/tabTask/delete?id='+item.id).then(
      res => {
        if(res.code === 0 && res.data){
          let index = tabRecordList.value.indexOf(item);
          tabRecordList.value.splice(index,1);
          message.success('删除成功')
        }else{
          message.error("删除失败");
        }
      }
  )

};

const cancel = () => {
  message.error('Click on No');
};
const changeStatus = (item) => {
  myAxios.post('/tabTask/edit',{
    id : item.id,
    isFinish: item.isFinish ?1:0,
  }).then(
      res => {
        if(res.code === 0 && res.data){
          message.success(item.isFinish?'恭喜完成':'成功取消');
        }else{
          message.error("数据同步失败");
        }
      }
  ).catch(
      e => {
        console.log("todo状态切换发生问题");
      }
  )
}
const tabList = ref([]);
const getTabList = () => {
  myAxios.get('/tab/list').then(
      res => {
        if(res.code === 0){
          tabList.value = res.data;
        }else{
          message.error('获取Tab栏失败');
        }
      }
  ).catch(
      error => {
        console.log('请求tab出错',error);
      }
  )
}
const changeTab = (val) => {
  console.log(val);
  getTabRecord(val);
}
const tabRecordList = ref([]);
const getTabRecord = (tabId) => {
  myAxios.get(`/tabTask/list?tabId=${tabId}`).then(
      res => {
        if(res.code === 0){
          tabRecordList.value = res.data;
        }else{
          message.error("获取tab详情失败");
        }
      }
  )
}
onMounted(() => {
  getTabList();
  setTimeout(() => {
    console.log("等待时间1s")
    activeKey.value = tabList.value[0].id;
    getTabRecord(activeKey.value);
  },1000);

})
</script>

<style scoped>

</style>